<!-- @format -->

<script setup>
	import { ref } from 'vue';
	// 导入 todo 样式
	import './styles/index.css';

	// 代办任务列表
	const todoList = ref([
		{ id: 321, name: '吃饭', finished: false },
		{ id: 666, name: '睡觉', finished: false },
		{ id: 195, name: '打豆豆', finished: false },
	]);

	// 输入框的内容
	const text = ref('');

	// 添加
	const add = () => {
		// 去除两段的空格
		const name = text.value.trim();
		// 判断是否为空 name === '' / name.length === 0 / !name
		if (!name) return alert('请输入内容');
		// 将输入框置为空
		text.value = ''
		// 尾插
		todoList.value.push({
			id: Date.now(), // 设置时间戳 +new Date() / new Date().getTime() / Date.now()
			name, // 对象简写
			finished: false
		})
	};
	
	// 删除单个
	const delOne = (index) => {
		if (confirm('确认要删除吗？')) {
			todoList.value.splice(index, 1);
		}
	};

	// 删除全部
	const clear = () => {
		// 直接置为空
		todoList.value = [];
	};
</script>

<template>
	<section clsss="todoapp">
		<header class="header">
			<h1>⽐特⼈记事本</h1>
			<input placeholder="请输⼊任务" class="new-todo" v-model="text" />
			<button class="add" @click="add">添加任务</button>
		</header>
		<section class="main">
			<ul class="todo-list">
				<li class="todo" v-for="(item, index) in todoList" :key="item.id">
					<div class="view">
						<span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label>
						<button class="destroy" @click="delOne(index)"></button>
					</div>
				</li>
			</ul>
		</section>
		<footer class="footer">
			<span class="todo-count"
				>合 计: <strong> {{ todoList.length }} </strong></span
			>
			<button class="clear-completed" @click="clear">清空任务</button>
		</footer>
	</section>
</template>
